import { Component, OnInit } from '@angular/core';
import {DashService} from '../dash.service';
import * as echarts from 'echarts';

export class AppletData {
  today = [];
  yestoady = [];
  week = [];
}

@Component({
  selector: 'program-increase',
  templateUrl: 'program-increase.component.html',
  styleUrls: ['program-increase.component.scss'],
  providers: [DashService]
})
export class ProgramIncreaseComponent implements OnInit {

  timeLine = [];
  echartsData = [
    {name: '未授权', type: 'line', data: []},
    {name: '未发布', type: 'line', data: []},
    {name: '已发布', type: 'line', data: []},
    {name: '已冻结', type: 'line', data: []}
  ];
  appletData = new AppletData;

  constructor(private dashService: DashService) { }

  ngOnInit() {
    this.getAppletData();
    this.getAppletMonthData();
  }

  // 获取小程序统计
  getAppletData() {
    this.dashService.getAppletData().subscribe(
      res => {
        this.appletData = res.data;
      }
    );
  }

  // 获取小程序月统计
  getAppletMonthData() {
    this.dashService.getAppletMonthData().subscribe(
      res => {
        res.data.every((val, idx, array) => {
          this.timeLine.push(val.date_month);
          this.echartsData[0].data.push(val.status1);
          this.echartsData[1].data.push(val.status2);
          this.echartsData[2].data.push(val.status3);
          this.echartsData[3].data.push(val.status4);
          return true;
        });
        this.echarts();
      }
    );
  }

  //echarts折线图配置项
  echarts(){
    console.log(this.echartsData);
    console.log(this.timeLine);
    let myChart = echarts.init(document.getElementById('echarts-line')),
      option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:['未授权','未发布','已发布','已冻结']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.timeLine
        },
        yAxis: {
          type: 'value'
        },
        series: this.echartsData
      };

    // 绘制图表
    myChart.setOption(option,true);
    window.onresize = myChart.resize;
  };

}
